import FlipCard from "../../components/flip-card";
import styles from "./index.module.less";
import { blog_list } from "./const";
import addButtonLottie from "../../assets//lottie/118823-add-product.json";
import { useLottie } from "lottie-react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "axios";
import { IDocument } from "./dto";

const options = {
  animationData: addButtonLottie,
  loop: true,
  autoplay: true,
};

interface IResponse {
  code: number;
  message: string;
  data: any;
}

const DocumentsPage = () => {
  const navigate = useNavigate();
  const { View } = useLottie(options, { height: 100 });
  const [documentList, setDocumentList] = useState<IDocument[]>([]);

  const getAllDocuments = () => {
    axios.get("/documents").then(({ data: res }: { data: IResponse }) => {
      console.log(res);
      setDocumentList(res.data);
    });
  };

  useEffect(() => {
    getAllDocuments();
  }, []);
  return (
    <div className={styles.container}>
      {/* {blog_list &&
        blog_list.map((b, index) => {
          return <FlipCard key={index} blog={b} index={index} />;
        })} */}
      {documentList &&
        documentList.map((d, index) => {
          return <FlipCard key={index} document={d} index={index} />;
        })}
      <div
        className={styles.addBtn}
        onClick={() => {
          navigate("/documents/document-add");
          console.log("Add documents");
        }}
      >
        {View}
      </div>
    </div>
  );
};

export default DocumentsPage;
